import { Button, StyleSheet, Text, TouchableOpacity, View, LogBox as log } from 'react-native';
import Picture from './src/page/Picture';
import React, { useEffect } from 'react';


export default function App() {
  // log.ignoreLogs(['----',Math.random(),'----'])
  let [isShow, changeShow] = React.useState<boolean>(true);
  let [pc, setPc] = React.useState<number>(50);
  let [exec, setExec] = React.useState<boolean>(false);
  const a_ref = React.useRef<number>(-1);
  const b_ref = React.useRef<number>(-1);
  useEffect(() => {
    setPc(50)
    a_ref.current && clearInterval(a_ref.current);
    b_ref.current && clearInterval(b_ref.current);
    if (exec) {
      a_ref.current = setInterval(() => {
        setPc(x => x - 1)
      }, 50)
      b_ref.current = setInterval(() => {
        changeShow(x => !x)
      }, 3000)
    }
    return () => {
      a_ref.current && clearInterval(a_ref.current);
      b_ref.current && clearInterval(b_ref.current);
    }
  }, [exec])
  useEffect(() => {
    if (pc <= 0) {
      clearInterval(a_ref.current);
      clearInterval(b_ref.current);
      changeShow(false);
    }
  }, [pc])

  return (
    <View style={styles.container}>
      {isShow ?
        <View style={styles.buttonContainer}>
          <Button title={pc === 50 ? '点我' : String(pc)} onPress={() => setExec(x => !x)} />
        </View> : <Picture isShow={() => {
          changeShow(true); setExec(false); console.log(isShow, Math.random());
        }} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flex: 3,
    margin: 120,
    width: '80%',
  },

});
